<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="keywords" content="青柠主机控制面板">
    <meta name="description" content="青柠主机控制面板。">
    <meta name="author" content="yinq">
    <title>反向代理 - 青柠主机控制面板</title>
    <link rel="shortcut icon" type="image/x-icon" href="">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <!-- 基础样式库 -->
    <link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/js/bootstrap-multitabs/multitabs.min.css">
    <link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/css/style.min.css">
    <!-- 功能插件样式 -->
    <link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/example/js/jquery-confirm/jquery-confirm.min.css">
    <link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/example/css/style.min.css">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <header class="card-header">
                    <div class="card-title">反向代理配置</div>
                </header>
                <div class="card-body">
                    <!-- 创建反向代理按钮 -->
                    <button type="button" class="btn btn-primary" onclick="openCreateProxyModal()">创建反向代理</button>
                    
                    <!-- 反向代理列表 -->
                    <div class="mt-5">
                        <h5>运行中的反向代理</h5>
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>代理名称</th>
                                        <th>目标URL</th>
                                        <th>发送域名</th>
                                        <th>代理目录</th>
                                        <th>类型</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="proxyList">
                                    {% if proxy_list %}
                                        {% for proxy in proxy_list %}
                                        <tr>
                                            <td>{{ proxy.proxyname }}</td>
                                            <td>{{ proxy.proxysite }}</td>
                                            <td>{{ proxy.todomain }}</td>
                                            <td>{{ proxy.proxydir }}</td>
                                            <td>{{ "启用缓存" if proxy.cache == 1 else "不启用缓存" }}</td>
                                            <td>
                                                <button type="button" class="btn btn-danger btn-sm" onclick="deleteProxy('{{ proxy.proxyname }}')">删除</button>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    {% else %}
                                        <tr>
                                            <td colspan="6" class="text-center">暂无反向代理配置</td>
                                        </tr>
                                    {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 创建反向代理弹窗 -->
<div class="modal fade" id="createProxyModal" tabindex="-1" aria-labelledby="createProxyModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createProxyModalLabel">创建反向代理</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="proxyForm">
                    <div class="mb-3">
                        <label for="proxyname" class="form-label">代理名称</label>
                        <input type="text" class="form-control" id="proxyname" name="proxyname" placeholder="请输入代理名称">
                    </div>
                    <div class="mb-3">
                        <label for="proxysite" class="form-label">目标URL</label>
                        <input type="text" class="form-control" id="proxysite" name="proxysite" placeholder="http://">
                    </div>
                    <div class="mb-3">
                        <label for="todomain" class="form-label">
                            发送域名
                            <span class="badge bg-info" data-bs-toggle="tooltip" data-bs-placement="top" 
                                  title="将域名添加到请求头传递到后端服务器，默认为目标URL域名，若设置不当可能导致代理无法正常访问">?</span>
                        </label>
                        <input type="text" class="form-control" id="todomain" name="todomain" placeholder="请输入发送域名">
                        <div class="form-text text-muted mt-2">
                            <strong>说明：</strong><br>
                            将域名添加到请求头传递到后端服务器，默认为目标URL域名，若设置不当可能导致代理无法正常访问，例如：<br>
                            &nbsp;&nbsp;• http://192.168.100.20:19888，则发送域名保持$http_host即可<br>
                            &nbsp;&nbsp;• http://www.bt.cn，则发送域名应当改为www.bt.cn<br>
                            <small class="text-muted">上面例子仅为常见情况，请以实际为准</small>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="createProxy()">创建</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="{{cdn}}/static/v5/js/jquery.min.js"></script>
<script type="text/javascript" src="{{cdn}}/static/v5/js/popper.min.js"></script>
<script type="text/javascript" src="{{cdn}}/static/v5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{{cdn}}/static/v5/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="{{cdn}}/static/v5/js/jquery-confirm/jquery-confirm.min.js"></script>
<!-- 弹框 -->
<script type="text/javascript" src="{{cdn}}/static/v5/example/js/layer/layer.js"></script>

<script>
    // 打开创建反向代理弹窗
    function openCreateProxyModal() {
        // 清空表单
        $('#proxyForm')[0].reset();
        // 显示弹窗
        $('#createProxyModal').modal('show');
    }
    
    // 创建反向代理
    function createProxy() {
        // 获取表单数据
        var formData = {
            action: 'CreateProxy',
            proxyname: $('#proxyname').val(),
            proxysite: $('#proxysite').val(),
            todomain: $('#todomain').val()
        };
        
        // 发送请求
        $.ajax({
            url: "/reverse_proxy/",
            type: "POST",
            data: formData,
            dataType: "json",
            success: function (response) {
                if (response.status) {
                    layer.msg(response.msg, {icon: 1});
                    // 关闭弹窗
                    $('#createProxyModal').modal('hide');
                    // 创建成功后刷新页面以显示新的代理列表
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                } else {
                    layer.msg(response.msg, {icon: 2});
                }
            },
            error: function (xhr, status, error) {
                layer.msg('请求失败: ' + error, {icon: 2});
            }
        });
    }
    
    function deleteProxy(proxyname) {
        // 确认删除
        $.confirm({
            title: '确认删除',
            content: '确定要删除反向代理 "' + proxyname + '" 吗？',
            buttons: {
                confirm: {
                    text: '确认',
                    btnClass: 'btn-danger',
                    action: function () {
                        // 发送删除请求
                        $.ajax({
                            url: "/reverse_proxy/delete",
                            type: "POST",
                            data: {
                                proxyname: proxyname
                            },
                            dataType: "json",
                            success: function (response) {
                                if (response.status) {
                                    layer.msg(response.msg, {icon: 1});
                                    // 删除成功后刷新页面以显示新的代理列表
                                    setTimeout(function() {
                                        location.reload();
                                    }, 1000);
                                } else {
                                    layer.msg(response.msg, {icon: 2});
                                }
                            },
                            error: function (xhr, status, error) {
                                layer.msg('请求失败: ' + error, {icon: 2});
                            }
                        });
                    }
                },
                cancel: {
                    text: '取消',
                    btnClass: 'btn-default'
                }
            }
        });
    }
    
    // 初始化工具提示
    $(document).ready(function(){
        $('[data-bs-toggle="tooltip"]').tooltip();
    });
</script>
</body>
</html>